/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-26 16:15:59
 */
import React, { useState, useEffect } from "react";
import { Tabs } from "antd";
import { ProDescriptions } from '@ant-design/pro-components';
import { CmdbContent, HcpTipModal, useModelAssociateType } from "@/components";
import RelationTopo from './relationTopo';

const FieldDetail = ({ info, visible, setVisible }) => {
    const [{associateType}] = useModelAssociateType();

    const columns = [
        {
            title: "源模型",
            key: "srcModuleName",
            dataIndex: "srcModuleName",
        },
        {
            title: "目标模型",
            key: "destModuleName",
            dataIndex: "destModuleName",
        },
        {
            title: "关联类型",
            key: "associateType",
            dataIndex: "associateType",
            render: (_, record)=> associateType?.[record.associateType]??record.associateType
        },
        {
            title: "源-目标约束",
            key: "mapping",
            dataIndex: "mapping",
        },
        {
            title: "关联描述",
            key: "description",
            dataIndex: "description",
        },
        {
            title: "效果示意",
            key: "topo",
            dataIndex: "topo",
            render: ()=> <RelationTopo info={info} associateType={associateType}/>
        }
    ];

    return (
        <HcpTipModal
            title="模型关联详情"
            width={500}
            visible={visible}
            onCancel={() => { setVisible(false) }}
            onFinish={() => { setVisible(false) }}
            content={
                <>
                    <ProDescriptions
                        column={1}
                        dataSource={info}
                        columns={columns}
                        style={{padding: "20px"}}
                    >
                    </ProDescriptions>
                </>
            }
        />
    )
}

export default FieldDetail;